<template>
    <div class="checkout-address">
        <div class="text">
            <!-- <div class="none">您需要先添加收货地址才可提交订单。</div> -->
            <ul>
                <li><span>收<i />货<i />人：</span>朱超</li>
                <li><span>联系方式：</span>132****2222</li>
                <li><span>收货地址：</span>海南省三亚市解放路108号物质大厦1003室</li>
            </ul>
            <a href="javascript:;">修改地址</a>
        </div>
        <div class="action">
            <XtxButton class="btn">切换地址</XtxButton>
            <XtxButton class="btn">添加地址</XtxButton>
        </div>
    </div>
</template>
  <script setup>

</script>
  <style scoped lang="scss">
  .checkout-address {
      border: 1px solid #f5f5f5;
      display: flex;
      align-items: center;
  
      .text {
          flex: 1;
          min-height: 90px;
          display: flex;
          align-items: center;
  
          .none {
              line-height: 90px;
              color: #999;
              text-align: center;
              width: 100%;
          }
  
          >ul {
              flex: 1;
              padding: 20px;
  
              li {
                  line-height: 30px;
  
                  span {
                      color: #999;
                      margin-right: 5px;
  
                      >i {
                          width: 0.5em;
                          display: inline-block;
                      }
                  }
              }
          }
  
          >a {
              color: $mainColor;
              width: 160px;
              text-align: center;
              height: 90px;
              line-height: 90px;
              border-right: 1px solid #f5f5f5;
          }
      }
  
      .action {
          width: 420px;
          text-align: center;
  
          .btn {
              width: 140px;
              height: 46px;
              line-height: 44px;
              font-size: 14px;
  
              &:first-child {
                  margin-right: 10px;
              }
          }
      }
  }
  .dialog {
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;
      &.active,&:hover {
        border-color: $mainColor;
        background: lighten($mainColor,50%);
      }
      > ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
}
  </style>